<template>
    <div>
        <!--右边-->
        <div class="h-27">
            <div class="p-1">
                <div class="p-2">添加挂牌</div>
                <div class="p-3">
                    <!--路由-->
                    <div class="b-8">
                        <div class="b-9 p-4">当前位置： <a href="javascript:;">首页</a> > <a href="javascript:;">添加挂牌</a></div>
                    </div>

                </div>
                <form class="p1-5">
                    <div class="p-5">
                        <div class="p-6">
                          <el-upload
                            class="p-7"
                            :class="{disabled:uploadDisabled}"
                            :action="uploadUrls"
                            :headers="headers"
                            :multiple = true
                            list-type="picture-card"
                            :limit='1'
                            :with-credentials='true'
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemoveCover"
                            :on-error="handleError"
                            :on-success="handleAvatarSuccessCover"
                            :before-upload="beforeAvatarUpload">
                            <i class="el-icon-plus"></i>
                          </el-upload>
<!--                            <img class="p-7" src="@/assets/image/fm.png" />-->
                            <div class="p-8">
                                <div class="p-9">项目挂牌作品封面图</div>
                            </div>
                            <div class="price-1" style="margin-top: 40px;position: relative;"><span class="price-2" style="text-align-last: justify;width: 60px;display: inline-block">价格</span>：<input v-model="price" class="price-3" type="text" style="width: 150px;border: 1px solid #ececec;padding: 0 10px;box-sizing: border-box;padding-right: 50px;" placeholder="请输入价格"/><span style="position: absolute;right: 20px">(元)</span></div>
                            <div class="time-1" style="margin-top: 10px;position: relative;"><span class="time-3" style="color: #d81e06;position: absolute;left: -5px">*</span><span class="time-2" style="text-align-last: justify;width:60px;display: inline-block">挂牌天数</span>：<input v-model="term" class="time-4" style="width: 150px;border: 1px solid #ececec;padding: 0 10px;box-sizing: border-box" type="text" placeholder="请输入天数"/></div>
                        </div>
                        <div class="p-10">
                            <div class="p-11">
                                <span class="p-12">*<label>选择挂牌类型：</label></span>
                                <div class="p-13">
                                    <label><input name="typei" type="radio" value="1" v-model="trading_type" @click="changeTradingType">项目挂牌 </label>
                                    <label><input name="typei" type="radio" value="0" v-model="trading_type" @click="changeTradingType">作品挂牌 </label>
                                </div>
                            </div>
                            <div class="p-11" v-if="trading_type==1">
                                <span class="p-12">*<label>选择项目类型：</label></span>
                                <div class="p-13">
                                    <label><input name="typei1" type="radio" value="0" v-model="term_type">转让 </label>
                                    <label><input name="typei1" type="radio" value="1" v-model="term_type">许可 </label>
                                </div>
                            </div>
                            <div class="p-11">
                                <span class="p-12">*<label>选择身份：</label></span>
                                <div class="p-13">
                                    <label><input name="typei3" type="radio" value="1" v-model="prove_type">企业 </label>
                                    <label><input name="typei3" type="radio" value="0" v-model="prove_type">个人 </label>
                                </div>
                            </div>
                            <div class="p-14" >
                                <div class="p-15">信息登记表</div>
                                <div class="p-16">
                                    <div class="p-17" v-if="term_type==0"><span class="p-12">*<label>标的信息登记表（转让）</label></span><a href="javascript:;" class="p-18 zr" @click="changeTable(2)">点击登记</a></div>
                                    <div class="p-17" v-if="term_type==1"><span class="p-12">*<label>标的信息登记表（许可使用）</label></span><a href="javascript:;" class="p-18 xk" @click="changeTable(3)">点击登记</a></div>
                                    <div class="p-17" v-if="trading_type==0"><span class="p-12">*<label>作品信息表</label></span><a href="javascript:;" class="p-18 xk" @click="changeTable(1)">点击登记</a></div>
                                </div>
                            </div>
<!--                            <div class="p-19" style="margin-top: 10px;">-->
<!--                                <div class="p-20">-->
<!--                                    <div class="p-17"><span class="p-12">*<label>挂牌协议书</label></span><a href="javascript:;" class="p-18 xy">点击查看</a></div>-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="p-19 p1-19">
                                <div class="p-20">
                                    <div class="p-17"><span class="p-12"><label>对摘牌准入要求与条件 </label></span><!--<a href="javascript:;" class="p-18 sr" >点击输入</a>--></div>
                                    <div class="p1-58">
                                        <textarea class="p-59"></textarea>
                                        <ul class="p-25">
                                            <el-upload
                                                    :action="uploadUrls"
                                                    :headers="headers"
                                                    :multiple = true
                                                    list-type="picture-card"
                                                    :limit='5'
                                                    :with-credentials='true'
                                                    :on-preview="handlePictureCardPreview"
                                                    :on-remove="handleRemove"
                                                    :on-error="handleError"
                                                    :on-success="handleAvatarSuccessDelist"
                                                    :before-upload="beforeAvatarUpload">
                                                <i class="el-icon-plus"></i>
                                            </el-upload>
                                            <el-dialog :visible.sync="dialogVisible">
                                                <img width="100%" :src="image" alt="">
                                            </el-dialog>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-21">
                        <div class="p-22"><span class="p-12">*<label>挂牌作品样片：</label></span><a href="javascript:;" class="p-18">挂牌作品样片,限定10张</a></div>
                        <ul class="p-23">
                          <el-upload
                            :action="uploadUrls"
                            :headers="headers"
                            :multiple = true
                            list-type="picture-card"
                            :limit='10'
                            :with-credentials='true'
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-error="handleError"
                            :on-success="handleAvatarSuccessBasic"
                            :before-upload="beforeAvatarUpload">
                            <i class="el-icon-plus"></i>
                          </el-upload>
                        </ul>
                    </div>
                    <div class="p-24">
                        <div class="p-22"><span class="p-12">*<label>证明文件：</label></span><a href="javascript:;" class="p-18">企业：营业执照复印件、法人身份证复印件</a></div>
                        <ul class="p-25">
                          <el-upload
                            :action="uploadUrls"
                            :headers="headers"
                            :multiple = true
                            list-type="picture-card"
                            :limit='5'
                            :with-credentials='true'
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-error="handleError"
                            :on-success="handleAvatarSuccessProve"
                            :before-upload="beforeAvatarUpload">
                            <i class="el-icon-plus"></i>
                          </el-upload>
                        </ul>
                    </div>
                    <div class="p-21">
                        <div class="p-22"><span class="p-12">*<label>著作权登记证书：</label></span><a href="javascript:;" class="p-18">挂牌作品的确权证明</a></div>
                        <ul class="p-23">
                          <el-upload
                            :action="uploadUrls"
                            :headers="headers"
                            :multiple = true
                            list-type="picture-card"
                            :limit='5'
                            :with-credentials='true'
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-error="handleError"
                            :on-success="handleAvatarSuccessAuthor"
                            :before-upload="beforeAvatarUpload">
                            <i class="el-icon-plus"></i>
                          </el-upload>
                        </ul>
                    </div>
                    <div class="p-28"><button class="p-29" @click="addTradingData(submitState)">提交</button></div>
                </form>
            </div>
        </div>
        <div style="clear: both;"></div>

        <!--标的信息登记表（转让）弹框-->
        <div class="p-30 p1-30" v-if="tableShow==2">
            <div class="p-31">
                <div class="p-32">
                    <div class="p-33">标的信息登记表（转让）</div>
                    <form class="p-34">
                        <div class="p-36">
                            <table class="p-35">
                                <tr>
                                    <td rowspan="10" class="p-37" style="height: 570px;">作品信息</td>
                                    <td class="p-38">作品名称</td>
                                    <td colspan="6"><input v-model="from_project_zr_table.project_name" type="text" style="width: 100%;height: 100%;padding: 0 10px;box-sizing: border-box;"></td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 125px;">作品类别</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;text-align: left;">
                                        <label class="p-39" v-for="item in projectTypeOptions">
                                          <input name="assignment" type="radio" :value="item.dictValue" v-model="from_project_zr_table.project_type"/>{{item.dictLabel}}
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td rowspan="4" class="p-38">著作权人</td>
                                    <td style="width: 80px;">姓名或名称</td>
                                    <td style="width: 80px;">证件类型</td>
                                    <td style="width: 200px;">证件号码</td>
                                    <td style="width: 80px;">国籍</td>
                                    <td style="width: 80px;">省份</td>
                                    <td style="width: 80px;">城市</td>
                                </tr>
                              <!--第一行-->
                                <tr>
                                    <td style="height: 27px;"><input type="text" v-model="from_project_zr_table.authorList[0].author_name"  style="width: 100%;height: 100%;text-align: center;" ></td>
                                    <td style="height: 27px;">
                                        <el-select class="p-40" v-model="from_project_zr_table.authorList[0].certificate_type" placeholder="请选择类型" clearable size="small">
                                          <el-option v-for="dict in certificateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                        </el-select>
                                    </td>
                                    <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[0].certificate_number" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                    <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[0].country" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                    <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[0].province" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                    <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[0].city" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                </tr>
                              <tr>
                                <!--第二行-->
                                <td style="height: 27px;"><input type="text" v-model="from_project_zr_table.authorList[1].author_name"  style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;">
                                  <el-select class="p-40" v-model="from_project_zr_table.authorList[1].certificate_type" placeholder="请选择类型" clearable size="small">
                                    <el-option v-for="dict in certificateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                  </el-select>
                                </td>
                                <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[1].certificate_number" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[1].country" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[1].province" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[1].city" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                              </tr>
                              <!--第三行-->
                              <tr>
                                <td style="height: 27px;"><input type="text" v-model="from_project_zr_table.authorList[2].author_name"  style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;">
                                  <el-select class="p-40" v-model="from_project_zr_table.authorList[2].certificate_type" placeholder="请选择类型" clearable size="small">
                                    <el-option v-for="dict in certificateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                  </el-select>
                                </td>
                                <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[2].certificate_number" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[2].country" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[2].province" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_zr_table.authorList[2].city" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                              </tr>
                                <tr>
                                    <td class="p-38">作品创作性质</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                      <label class="p-39" v-for="item in creationTypeOptions" :key="item.dictValue">
                                        <input name="zrassignment1" type="radio" :value="item.dictValue" v-model="from_project_zr_table.creation_type"/>{{item.dictLabel}}
                                      </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 35px;">创作完成日期</td>
                                    <td colspan="2" style="height: 35px;">
                                      <el-date-picker clearable size="small" style="width: 200px"
                                                      v-model="from_project_zr_table.creation_finish_time"
                                                      type="date"
                                                      value-format="yyyy-MM-dd"
                                                      placeholder="选择创作完成日期">
                                      </el-date-picker>
                                    </td>
                                    <td colspan="2" style="height: 35px;">创作完成地点</td>
                                    <td colspan="2" style="height: 35px;"><input v-model="from_project_zr_table.creation_finish_site" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                </tr>
                                <tr>
                                    <td class="p-38">发表状态</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                        <div class="p-41">
                                            <label class="p-39"><input name="zrassignment2" type="radio" value="1" v-model="from_project_zr_table.published_state"/>已发表</label>
                                            <label class="p-39"><input name="zrassignment2" type="radio" value="0" v-model="from_project_zr_table.published_state"/>未发表</label>
                                        </div>
                                        <div class="p-41">
                                            <div class="p-42">
                                                <span class="p-43">首次发表日期：</span>
                                                  <el-date-picker clearable size="small" style="width: 200px"
                                                              v-model="from_project_zr_table.published_first_time"
                                                              type="date"
                                                              value-format="yyyy-MM-dd"
                                                              placeholder="选择首次发表日期">
                                                  </el-date-picker>
                                            </div>
                                            <div class="p-45">
                                                <span class="p-46">发表地点：</span>
                                                <div class="p-47"><span class="p-48">国家：</span><input v-model="from_project_zr_table.published_country" class="p-49" type="text"/></div>
                                                <div class="p-47"><span class="p-48">城市：</span><input v-model="from_project_zr_table.published_city" class="p-49" type="text"/></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38">作品简介</td>
                                    <td colspan="6" style="text-align: left;">
                                        <textarea class="p-50" placeholder="请输入作品简介" v-model="from_project_zr_table.project_explain"></textarea>
                                    </td>
                                </tr>
                                <tr>
                                    <td rowspan="2" class="p-37" style="height: 445px;">作品信息</td>
                                    <td class="p-38" style="height: 250px;">著作权人权利拥有状况</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                        <div class="p-41 p-52">
                                            <label class="p-39"><input name="zrall1"  id="j_cbAll" type="radio" value="" @click="checkedZrPossessPowerAll('zr_possess_power_all')" />全部</label><br />
                                            <label class="p-39"><input name="zrall1" id='j_cbPart' type="radio" value="" @click="checkedZrPossessPowerAll('zr_possess_power_noall')" />部分</label>
                                        </div>
                                        <div class="p-51"  id="j_tb">
                                          <label class="p-39" v-for="item in powerTypeOptions" :key="item.dictValue">
                                            <input name="zrright2" type="checkbox" :value="item.dictValue" v-model="from_project_zr_table.possess_power" />{{item.dictLabel}}
                                          </label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 195px;">挂牌标的</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                        <div class="p-41 p-52">
                                            <label class="p-39"><input name="zrall2"  id="j_cbAll1" type="radio" value="" @click="checkedZrPossessPowerAll('zr_trading_power_all')"/>全部</label><br />
                                            <label class="p-39"><input name="zrall2" id='j_cbPart1' type="radio" value="" @click="checkedZrPossessPowerAll('zr_trading_power_noall')"/>部分</label>
                                        </div>
                                        <div class="p-51"  id="j_tb1">
                                          <label class="p-39" v-for="item in powerTypeOptions" :key="item.dictValue">
                                            <input name="zrright3" type="checkbox" :value="item.dictValue" v-model="from_project_zr_table.trading_power" />{{item.dictLabel}}
                                          </label>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="p-53">
                            <button class="p-54" type="submit" @click="closeTable">确定</button>
                        </div>
                    </form>
                </div>
                <img class="p-55 p1-55" src="@/assets/image/close1.png" @click="closeTable"/>
            </div>
        </div>
        <!--标的信息登记表（许可使用）弹框-->
        <div class="p-30 p2-30" v-if="tableShow==3">
            <div class="p-31">
                <div class="p-32">
                    <div class="p-33">标的信息登记表（许可使用）</div>
                    <form class="p-34">
                        <div class="p-36">
                            <table class="p-35">
                                <tr>
                                    <td rowspan="10" class="p-37" style="height: 570px;">作品信息</td>
                                    <td class="p-38">作品名称</td>
                                    <td colspan="6"><input v-model="from_project_xk_table.project_name" type="text" style="width: 100%;height: 100%;padding: 0 10px;box-sizing: border-box;"></td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 125px;">作品类别</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;text-align: left;">
                                      <label class="p-39" v-for="item in projectTypeOptions">
                                        <input name="assignment" type="radio" :value="item.dictValue" v-model="from_project_xk_table.project_type"/>{{item.dictLabel}}
                                      </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td rowspan="4" class="p-38">著作权人</td>
                                    <td style="width: 80px;">姓名或名称</td>
                                    <td style="width: 80px;">证件类型</td>
                                    <td style="width: 200px;">证件号码</td>
                                    <td style="width: 80px;">国籍</td>
                                    <td style="width: 80px;">省份</td>
                                    <td style="width: 80px;">城市</td>
                                </tr>

                              <!--第一行-->
                              <tr>
                                <td style="height: 27px;"><input type="text" v-model="from_project_xk_table.authorList[0].author_name"  style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;">
                                  <el-select class="p-40" v-model="from_project_xk_table.authorList[0].certificate_type" placeholder="请选择类型" clearable size="small">
                                    <el-option v-for="dict in certificateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                  </el-select>
                                </td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[0].certificate_number" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[0].country" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[0].province" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[0].city" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                              </tr>
                              <tr>
                                <!--第二行-->
                                <td style="height: 27px;"><input type="text" v-model="from_project_xk_table.authorList[1].author_name"  style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;">
                                  <el-select class="p-40" v-model="from_project_xk_table.authorList[1].certificate_type" placeholder="请选择类型" clearable size="small">
                                    <el-option v-for="dict in certificateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                  </el-select>
                                </td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[1].certificate_number" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[1].country" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[1].province" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[1].city" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                              </tr>
                              <!--第三行-->
                              <tr>
                                <td style="height: 27px;"><input type="text" v-model="from_project_xk_table.authorList[2].author_name"  style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;">
                                  <el-select class="p-40" v-model="from_project_xk_table.authorList[2].certificate_type" placeholder="请选择类型" clearable size="small">
                                    <el-option v-for="dict in certificateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                  </el-select>
                                </td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[2].certificate_number" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[2].country" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[2].province" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                <td style="height: 27px;"><input v-model="from_project_xk_table.authorList[2].city" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                              </tr>

                                <tr>
                                    <td class="p-38">作品创作性质</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                      <label class="p-39" v-for="item in creationTypeOptions" :key="item.dictValue">
                                        <input name="assignment" type="radio" :value="item.dictValue" v-model="from_project_xk_table.creation_type"/>{{item.dictLabel}}
                                      </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 35px;">创作完成日期</td>
                                    <td colspan="2" style="height: 35px;">
                                      <el-date-picker clearable size="small" style="width: 200px"
                                        v-model="from_project_xk_table.creation_finish_time"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择创作完成日期">
                                      </el-date-picker>
                                    </td>
                                    <td colspan="2" style="height: 35px;">创作完成地点</td>
                                    <td colspan="2" style="height: 35px;"><input v-model="from_project_xk_table.creation_finish_site" type="text" style="width: 100%;height: 100%;text-align: center;" ></td>
                                </tr>
                                <tr>
                                    <td class="p-38">发表状态</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                        <div class="p-41">
                                            <label class="p-39"><input name="assignment" type="radio" value="1" v-model="from_project_xk_table.published_state"/>已发表</label>
                                            <label class="p-39"><input name="assignment" type="radio" value="0" v-model="from_project_xk_table.published_state"/>未发表</label>
                                        </div>
                                        <div class="p-41">
                                            <div class="p-42">
                                                <span class="p-43">首次发表日期：</span>
                                              <el-date-picker clearable size="small" style="width: 200px"
                                                              v-model="from_project_xk_table.published_first_time"
                                                              type="date"
                                                              value-format="yyyy-MM-dd"
                                                              placeholder="选择首次发表日期">
                                              </el-date-picker>
<!--                                                <div class="layui-form p-44">-->
<!--                                                    <div class="layui-form-item" style="margin-bottom: 0;">-->
<!--                                                        <div class="layui-inline" style="margin-bottom: 0;">-->
<!--                                                            <div class="layui-input-inline">-->
<!--                                                                <input type="text" class="layui-input" id="test2" placeholder="输入日期" style="height: initial;">-->
<!--                                                            </div>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                </div>-->
                                            </div>
                                            <div class="p-45">
                                                <span class="p-46">发表地点：</span>
                                                <div class="p-47"><span class="p-48">国家：</span><input v-model="from_project_xk_table.published_country" class="p-49" type="text"/></div>
                                                <div class="p-47"><span class="p-48">城市：</span><input v-model="from_project_xk_table.published_city" class="p-49" type="text"/></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38">作品简介</td>
                                    <td colspan="6" style="text-align: left;">
                                        <textarea class="p-50" placeholder="请输入作品简介" v-model="from_project_xk_table.project_explain"></textarea>
                                    </td>
                                </tr>
                                <tr>
                                    <td rowspan="5" class="p-37" style="height: 462px;">作品信息</td>
                                    <td class="p-38" style="height: 250px;">著作权人权利拥有状况</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                        <div class="p-41 p-52">
                                            <label class="p-39"><input name="all2"  id="j_cbAll2" type="radio" value="" @click="checkedZrPossessPowerAll('xk_possess_power_all')"/>全部</label><br />
                                            <label class="p-39"><input name="all2" id='j_cbPart2' type="radio" value="" @click="checkedZrPossessPowerAll('xk_possess_power_noall')"/>部分</label>
                                        </div>
                                        <div class="p-51"  id="j_tb2">
                                          <label class="p-39" v-for="item in powerTypeOptions" :key="item.dictValue">
                                            <input name="right3" type="checkbox" :value="item.dictValue" v-model="from_project_xk_table.possess_power" />{{item.dictLabel}}
                                          </label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 195px;">挂牌标的</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                        <div class="p-41 p-52">
                                            <label class="p-39"><input name="all3"  id="j_cbAll3" type="radio" value="" @click="checkedZrPossessPowerAll('xk_trading_power_all')"/>全部</label><br />
                                            <label class="p-39"><input name="all3" id='j_cbPart3' type="radio" value="" @click="checkedZrPossessPowerAll('xk_trading_power_noall')"/>部分</label>
                                        </div>
                                        <div class="p-51"  id="j_tb3">
                                          <label class="p-39" v-for="item in powerTypeOptions" :key="item.dictValue">
                                            <input name="right3" type="checkbox" :value="item.dictValue" v-model="from_project_xk_table.trading_power" />{{item.dictLabel}}
                                          </label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height: 35px;">许可方式</td>
                                    <td colspan="6" style="height: 35px; text-align: left;padding: 0 10px;">
                                        <div class="p-41">
                                            <label class="p-39"><input name="zy"  id="1j_cbAll2" type="radio" value="0" v-model="from_project_xk_table.permission_type"/>专有</label>
                                            <label class="p-39"><input name="zy" id='1j_cbPart2' type="radio" value="1" v-model="from_project_xk_table.permission_type"/>一般</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height: 35px;">许可期限</td>
                                    <td colspan="6" style="height: 35px;">
                                        <div class="layui-form p-56">
                                            <div class="layui-form-item">
                                              <el-date-picker clearable size="small" style="width: 200px"
                                                              v-model="from_project_xk_table.permission_start_time"
                                                              type="date"
                                                              value-format="yyyy-MM-dd"
                                                              placeholder="选择开始时间">
                                              </el-date-picker>
                                                <span class="p-57">至</span>
                                              <el-date-picker clearable size="small" style="width: 200px"
                                                              v-model="from_project_xk_table.permission_end_time"
                                                              type="date"
                                                              value-format="yyyy-MM-dd"
                                                              placeholder="选择结束时间">
                                              </el-date-picker>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height: 35px;">许可区域</td>
                                    <td colspan="6" style="height: 35px;padding: 0 10px;">
                                        <input v-model="from_project_xk_table.permission_region" type="text" style="width: 100%;height: 100%;"/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="p-53">
                            <button class="p-54" type="submit" @click="closeTable">确定</button>
                        </div>
                    </form>
                </div>
                <img class="p-55 p2-55" src="@/assets/image/close1.png" @click="closeTable"/>
            </div>
        </div>
        <!--作品信息登记表（许可使用）弹框-->
        <div class="p-30 p2-30" v-if="tableShow==1">
            <div class="p-31">
                <div class="p-32">
                    <div class="p-33">作品信息登记表</div>
                    <form class="p-34">
                        <div class="p-36">
                            <table class="p-35">
                                <tr>
                                    <td rowspan="11" class="p-37" style="height: 570px;">作品信息</td>
                                    <td class="p-38">作品名称</td>
                                    <td colspan="6">
                                      <input v-model="from_works_table.works_name" type="text" style="width: 100%;height: 100%;padding: 0 10px;box-sizing: border-box;">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 125px;" rowspan="3">作品信息</td>
                                    <td class="p-38">类别</td>
                                    <td colspan="5" style="text-align: left;padding: 0 10px;text-align: left;">
                                      <el-select v-model="from_works_table.works_type" placeholder="请选择作品类别" clearable size="small">
                                        <el-option v-for="dict in worksTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                      </el-select>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height: 27px;">题材</td>
                                    <td style="text-align: left;padding: 0 10px;text-align: left;" colspan="5">
                                      <el-select v-model="from_works_table.works_theme" placeholder="请选择作品题材" clearable size="small">
                                        <el-option v-for="dict in worksThemeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                      </el-select>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height: 27px;">地区</td>
                                    <td style="text-align: left;padding: 0 10px;text-align: left;" colspan="5">
                                      <el-select v-model="from_works_table.works_region" placeholder="请选择作品地区" clearable size="small">
                                        <el-option v-for="dict in worksRegionOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                                      </el-select>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38">著作权人姓名或名称</td>
                                    <td colspan="6"><input v-model="from_works_table.author" type="text" style="width: 100%;height: 100%;padding: 0 10px;box-sizing: border-box;"></td>
                                </tr>

                                <tr>
                                    <td class="p-38" rowspan="2">作品创作性质</td>
                                    <td colspan="6" style="text-align: left;padding: 0 10px;">
                                      <label class="p-39" v-for="item in creationTypeOptions" :key="item.dictValue">
                                        <input name="assignment" type="radio" :value="item.dictValue" v-model="from_works_table.creation_type"/>{{item.dictLabel}}
                                      </label>
<!--                                      <el-select v-model="from_works_table.creation_type" placeholder="请选择创作性质" clearable size="small">-->
<!--                                        <el-option v-for="dict in creationTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>-->
<!--                                      </el-select>-->
                                    </td>
                                </tr><tr>
                                <td class="p-38" style="height: 27px;">备注</td>
                                <td colspan="6" style="height: 27px;"><textarea type="text" style="width: 100%;height: 96%;padding: 5px 10px;box-sizing: border-box;"></textarea></td>
                            </tr>
                                <tr>
                                    <td class="p-38" style="height: 35px;">创作完成日期</td>
                                    <td colspan="6" style="height: 35px;">
                                        <el-date-picker clearable size="small" style="width: 200px"
                                                        v-model="from_works_table.end_time"
                                                        type="date"
                                                        value-format="yyyy-MM-dd"
                                                        placeholder="选择创作完成日期">
                                        </el-date-picker>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 35px;">发行地区</td>
                                    <td colspan="6" style="height: 35px;"><input v-model="from_works_table.issue_region" type="text" style="width: 100%;height: 100%;padding: 0 10px;box-sizing: border-box;"></td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 35px;">主要创作人员</td>
                                    <td colspan="6" style="height: 35px;"><input v-model="from_works_table.authors" type="text" style="width: 100%;height: 100%;padding: 0 10px;box-sizing: border-box;"></td>
                                </tr>
                                <tr>
                                    <td class="p-38" style="height: 35px;">作品权益类型</td>
                                    <td colspan="6" style="height: 35px;text-align: left;padding: 0 10px;">
                                        <label class="p-39" v-for="item in powerTypeOptions" :key="item.dictValue">
                                          <input name="right2" type="checkbox" :value="item.dictValue" v-model="from_works_table.trading_power" />{{item.dictLabel}}
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-37" style="height: 250px;">作品简介</td>
                                    <td colspan="6" style="text-align: left;height: 250px;">
                                        <textarea v-model="from_works_table.works_explain" class="p-50" placeholder="请输入作品简介" style="height:97%"></textarea>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-37">附注</td>
                                    <td colspan="5" style="text-align: left;padding: 5px 10px;">
                                        <div><span style="font-weight: bold;">作品类别：</span>{{worksTypeOptionsText}}</div>
                                        <div><span style="font-weight: bold;">题材：</span>{{worksThemeOptionsText}}</div>
                                        <div><span style="font-weight: bold;">地区：</span>{{worksRegionOptionsText}}</div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="p-53">
                            <button class="p-54" type="submit" @click="closeTable">确定</button>
                        </div>
                    </form>
                </div>
                <img class="p-55 p2-55" src="@/assets/image/close1.png" @click="closeTable"/>
            </div>
        </div>
        <!--挂牌协议书-->
        <div class="p-30 p3-30" v-if="tableShow==4">
            <div class="p-31">
                <div class="p-32">
                    <div class="p-33">挂牌协议书</div>
                    <form class="p-34">
                        <div class="p-36">
                            <div class="p-58" style="line-height: 35px;">
                                ××建筑工程公司（甲方）<br />
                                ××装修设计公司（乙方）<br />
                                为发挥双方的优势，共谋发展，并为今后逐步向组成集团公司过渡，双方经过充分友好的协商，特订立本协议。<br />
                                一、建立密切的技术合作关系，今后凡甲方承接的工程，装修设计任务均交给乙方承担。<br />
                                二、乙方保证，在接到任务后，将立即组织以高级工程师为领导的精干设计队伍，在10日提出设计方案，并在方案认可后一个月内完成全部设计图纸。<br />
                                三、为保证设计的质量，甲方将毫无保留地向乙方提供所需的一切建筑技术资料。<br />
                                四、装修施工队伍由甲方组织，装修工程的施工由甲方组织实施。施工期间，乙方派出高级工程师监督施工，以保证工程的质量。<br />
                                五、甲方按装修工程总费用的千分之×向乙方支付设计费。<br />
                                六、本协议自签订之日起生效。<br />
                                七、本协议书一式两份，双方各执一份。<br />
                                附件：《××建筑装修工程集团公司组建意向书》一份。<br />
                                甲方 ××建筑工程公司（盖章）<br />
                                法人代表：××（签字）<br />
                                乙方 ××装修设计公司（盖章）<br />
                                法人代表：××（签字）<br />
                                19××年×月×日<br />
                                甲方地址：×××××× 乙方地址：××××××<br />
                                邮政编码：×××××× 邮政编码：××××××<br />
                                电话兼传真：×××××× 电话兼传真：××××××<br />
                                银行账号：×××× 银行账号：××××<br />
                                联系人：×××联系人：×××<br />
                            </div>
                        </div>
                        <div class="p-53">
                            <button class="p-54 p1-54" type="button" @click="closeTable">我知道了</button>
                        </div>
                    </form>
                </div>
                <img class="p-55 p3-55" src="@/assets/image/close1.png" @click="closeTable"/>
            </div>
        </div>
    </div>
</template>

<script>
    import { getToken } from "@/utils/auth";
    import { addTrading } from "@/api/addTrading.js";
    const baseUrl = process.env.VUE_APP_BASE_API;

    export default {
        name: "addDelist",
        data(){
            return{
                worksTypeOptions:[], //作品类型字典
                worksTypeOptionsText:undefined,
                creationTypeOptions:[], //创作性质字典
                worksThemeOptions:[], //作品题材字典
                worksThemeOptionsText:undefined,
                worksRegionOptions:[], //作品地区字典
                worksRegionOptionsText:undefined,
                powerTypeOptions:[], //权力类型
                projectTypeOptions:[], //项目类型字典
                certificateTypeOptions:[], //证件类型字典

                tableShow:0,  //作品登记1，转让2，许可3

                uploadDisabled: false, //是否禁用样片的上传
                dialogVisible:false,   //是否展示预览图片
                from_works_table:{
                  power_type:[]
                },      //作品表
                from_project_zr_table:{
                  authorList:[{author_name:undefined,certificate_type:undefined,certificate_number:undefined,country:undefined,province:undefined,city:undefined},
                    {author_name:undefined,certificate_type:undefined,certificate_number:undefined,country:undefined,province:undefined,city:undefined},
                    {author_name:undefined,certificate_type:undefined,certificate_number:undefined,country:undefined,province:undefined,city:undefined}],
                  possess_power:[],//具备的权限
                  trading_power:[],//出售的权限
                }, //转让
                from_project_xk_table:{
                  authorList:[{author_name:undefined,certificate_type:undefined,certificate_number:undefined,country:undefined,province:undefined,city:undefined},
                    {author_name:undefined,certificate_type:undefined,certificate_number:undefined,country:undefined,province:undefined,city:undefined},
                    {author_name:undefined,certificate_type:undefined,certificate_number:undefined,country:undefined,province:undefined,city:undefined}],
                  possess_power:[],//具备的权限
                  trading_power:[],//出售的权限
                }, //许可表

                trading_type:undefined, //挂牌类型 0：作品挂牌。1：项目挂牌
                term_type:undefined,   //0:转让  1:许可
                prove_type:undefined,  //身份 0:个人 1；企业
                term:undefined, //挂牌约定的天数
                price:undefined,  //价格
                delist_text:undefined,  //摘牌要求文字
                cover_image: undefined, //封面图
                delist_image_list:[],//摘牌要求图片数组
                author_image_list:[],//著作权证明书
                prove_image_list:[], //企业个人证明图片
                basic_image_list:[], //样片图片

                image:undefined, //图片预览

                submitState:false, //提交状态-控制提交按钮的有效性，防止重复提交
                uploadUrls: baseUrl+'/api/file/imageUpload',
                headers: { token: "Bearer " + getToken() },
            }
        },
        created(){
          this.getDicts("works_type").then(response=>{ //作品类型字典
            this.worksTypeOptions=response.data;
            let text="";
            for(let i=0;i<this.worksTypeOptions.length;i++){
              text=text+this.worksTypeOptions[i].dictLabel+"、";
            }
            text=text.substring(0, text.length - 1);
            this.worksTypeOptionsText=text;
          });
          this.getDicts("creation_type").then(response=>{ //创作性质字典
            this.creationTypeOptions=response.data;
          });
          this.getDicts("works_theme").then(response=>{  //作品题材
            this.worksThemeOptions=response.data;
            let text="";
            for(let i=0;i<this.worksThemeOptions.length;i++){
              text=text+this.worksThemeOptions[i].dictLabel+"、";
            }
            text=text.substring(0, text.length - 1);
            this.worksThemeOptionsText=text;
          });
          this.getDicts("works_region").then(response=>{ //作品地区
            this.worksRegionOptions=response.data;
            let text="";
            for(let i=0;i<this.worksRegionOptions.length;i++){
              text=text+this.worksRegionOptions[i].dictLabel+"、";
            }
            text=text.substring(0, text.length - 1);
            this.worksRegionOptionsText=text;
          });
          this.getDicts("power_type").then(response=>{  //权利类型
            this.powerTypeOptions=response.data;
          })
          this.getDicts("project_type").then(response=>{ //项目类型字典
            this.projectTypeOptions=response.data;
          })
          this.getDicts("certificate_type").then(response=>{ //证件类型
            this.certificateTypeOptions=response.data;
          })
        },
        methods:{
            changeTradingType(){
              this.term_type=undefined;
            },
            changeTable(e){ //显示表格
                this.tableShow=e;
            },
            closeTable(){  //关闭表格
                this.tableShow=0;
            },


            //图片上传组件
            handleRemove(file, fileList) {//移除
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {//预览
                console.log(file)
                this.image = file.url;
                this.dialogVisible = true;
            },
            handleError(err){//上传失败
                console.log(err)
            },
            beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
                console.log(file);
                const isJPG = true;
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleAvatarSuccessDelist(res) {//摘牌要求图片上传成功
                var files = res.url;
                this.delist_image_list.push(files)
            },
            handleAvatarSuccessBasic(res) {//样片图片上传成功
                var files = res.url;
                this.basic_image_list.push(files)
            },
            handleAvatarSuccessProve(res) {//个人证明图片上传成功
               var files = res.url;
               this.basic_image_list.push(files)
            },
            handleAvatarSuccessAuthor(res){
              var files = res.url;
              this.author_image_list.push(files)
            },
            handleRemoveCover(file, fileList) {//移除
              this.cover_image=undefined;
              this.uploadDisabled=false;
            },
            handleAvatarSuccessCover(res){
              var files = res.url;
              this.cover_image=files;
              this.uploadDisabled = true;
              console.log("上传成功");
              console.log(this.uploadDisabled);
            },
            //转让
            checkedZrPossessPowerAll(e){
              var _this=this;
              if(e=="zr_possess_power_all"){
                _this.from_project_zr_table.possess_power=[];
                _this.powerTypeOptions.forEach(function(item,index){
                  _this.from_project_zr_table.possess_power.push(item.dictValue);
                })
              }else if(e=="zr_possess_power_noall"){
                _this.from_project_zr_table.possess_power=[];
              }else if(e=="zr_trading_power_all"){
                _this.from_project_zr_table.trading_power=[];
                _this.powerTypeOptions.forEach(function(item,index){
                  _this.from_project_zr_table.trading_power.push(item.dictValue);
                })
              }else if(e=="zr_trading_power_noall"){
                _this.from_project_zr_table.trading_power=[];
              } else if(e=="xk_possess_power_all"){
                _this.from_project_xk_table.possess_power=[];
                _this.powerTypeOptions.forEach(function(item,index){
                  _this.from_project_xk_table.possess_power.push(item.dictValue);
                })
              }else if(e=="xk_possess_power_noall"){
                _this.from_project_xk_table.possess_power=[];
              }else if(e=="xk_trading_power_all"){
                _this.from_project_xk_table.trading_power=[];
                _this.powerTypeOptions.forEach(function(item,index){
                  _this.from_project_xk_table.trading_power.push(item.dictValue);
                })
              }else if(e=="xk_trading_power_noall"){
                _this.from_project_xk_table.trading_power=[];
              }
            },
            addTradingData(e){  //提交资料
              if(e){
                return
              }
              this.submitState=true;
              let delist_image_list=this.listSwitchString(this.delist_image_list);
              let author_image_list=this.listSwitchString(this.author_image_list);
              let prove_image_list=this.listSwitchString(this.prove_image_list);
              let basic_image_list=this.listSwitchString(this.prove_image_list);

              if(!this.trading_type){this.msgError("请选择挂牌类型");this.submitState=false;return}
              if(this.trading_type==1 && this.term_type==null){this.msgError("请选择项目类型");this.submitState=false;return}
              if(!this.prove_type){this.msgError("请选择身份");this.submitState=false;return}
              if(this.price){
                if(/^[0-9]+$/.test(this.price)){
                }else{
                  this.msgError("请输入正确的价格格式");this.submitState=false;return
                }
              }
              if(!this.term){this.msgError("请输入约定挂牌的天数");this.submitState=false;return}
              if(!this.cover_image){this.msgError("请上传封面图");this.submitState=false;return}
              if(!author_image_list){this.msgError("请上传著作权证明书");this.submitState=false;return}
              if(!prove_image_list){this.msgError("请上传个人证明图片");this.submitState=false;return}
              if(!basic_image_list){this.msgError("请上传样片图片");this.submitState=false;return}

              if(trading_type==0){  //作品挂牌
                if(!from_works_table.works_name){this.msgError("请输入作品名");this.submitState=false;return}
                if(!from_works_table.works_type){this.msgError("请选择作品类别");this.submitState=false;return}
                if(!from_works_table.works_theme){this.msgError("请选择作品题材");this.submitState=false;return}
                if(!from_works_table.works_region){this.msgError("请选择作品地区");this.submitState=false;return}
                if(!from_works_table.author){this.msgError("请填写著作权人");this.submitState=false;return}
                if(!from_works_table.creation_type){this.msgError("请选择作品创作性质");this.submitState=false;return}
                if(!from_works_table.end_time){this.msgError("请选择创作完成日期");this.submitState=false;return}
                if(!from_works_table.issue_region){this.msgError("请输入发行地区");this.submitState=false;return}
                if(!from_works_table.authors){this.msgError("请输入主要创作人员");this.submitState=false;return}
                if(!from_works_table.trading_power){this.msgError("请选择作品权益类型");this.submitState=false;return}
                if(!from_works_table.works_explain){this.msgError("请输入作品简介");this.submitState=false;return}
              }else if(trading_type==1 && term_type==0){ //转让

              }else if(trading_type==1 && term_type==1){ //许可

              }
              let data={trading_type:this.trading_type,
                term_type:this.term_type,
                prove_type:this.term_type,
                term:this.term,
                price:this.price,
                delist_text:this.delist_text,
                cover_image:this.cover_image,

              }
              addTrading().then(response =>{
                if(response.code===200){
                  this.msgSuccess("新增挂牌成功，请等待审核");
                }
              });
            },
            listSwitchString(e){
              let str="";
              for(let i=0;i<e.length;i++){
                str=str+e[i]+","
              }
              str=str.substring(0, str.length - 1);
              return str;
            }
        },
    }
</script>

<style scoped>
    .disabled >>> .el-upload--picture-card{
      display: none;
    }
    @import "../../layui/css/layui.css";
    @import "../../css/index.css";
    @import "../../css/user_listing.css";
    @import "../../css/user_addlistingl.css";
    @import "../../css/idangerous.swiper.css";
</style>
